<template>
  <div class="product">
    <div class="select-more">
			<Select :placeholder="$t('store.selectChannle')" @on-change="productChange">
				<Option v-for="item in platformList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
    </div>
    <div class="product-content">
			<div class="product-list">
				<div v-for="item in dataList" :key="item.id">
					<store-goods-item :item="item" :showFavorite="true" @changeFavorite="removeFavorites"></store-goods-item>
				</div>
			</div>
      <t-loading v-if="loading"></t-loading>
      <t-no-data v-if="!loading && dataList.length == 0"></t-no-data>
    </div>

    <div class="page">
      <Page :total="totalPage" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage"
        :page-size="form.pageSize" show-sizer />
    </div>

  </div>
</template>

<script>
import { favoritesDeleteBatch, favoritesList } from "@/api/favorites";
import TLoading from "@/components/t-loading";
import TNoData from "@/components/t-no-data";
import TPlatform from "@/components/t-platform";
import { mapState } from "vuex";
import storeGoodsItem from '@/views/main/goods/components/store-goods-item';

export default {
  name: "shop",
  components: { TPlatform, TNoData, TLoading,storeGoodsItem },
  data() {
    return {
      totalPage: 1,
      dataList: [], // 数据列表
      loading: false,
      form: {
        pageNo: 1, // 页
        pageSize: 20, // 页数
      },
			platformList: [
				{
					label: this.$t('user.all'),
					value:'all'
				},
				{
					label: 'TaoBao',
					value: 'TAOBAO'
				},
				{
					label: '1688',
					value: '1688'
				},
				{
					label: 'WeiDian',
					value: 'WEIDIAN'
				}
			],
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  created() {
    this.getDataList();
  },
  methods: {
		// 显示
    onPageSize(size) {
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getDataList();
    },
		// 下一页
    onPage(index) {
      this.form.pageNo = index;
      this.getDataList();
    },
		// 获取收藏列表
    getDataList() {
      this.loading = true;
      favoritesList(this.form).then((res) => {
        this.dataList = res.result.records;
        this.totalPage = res.result.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
		//取消收藏
    removeFavorites(item) {
      favoritesDeleteBatch([item.spuNo], 'spu').then((res) => {
        this.$Message.success(this.$t('user.deletedSuccess'));
        this.getDataList();
      })
    },
		//选择平台
		productChange(e){
			if(e == 'all'){
				this.form.channel = '';
			}else{
				this.form.channel = e;
			}
			this.form.pageNo = 1;
			this.getDataList();
		}
  }
}
</script>

<style scoped lang="less">
.product {
  .select-more {
  	width: 206px;
  }
  :deep(.select-more) {
  	.ivu-select-selection {
  		background: #F7F9FC;
  		border: none;
  		height: 52px;
  		.ivu-select-placeholder,
  		.ivu-select-selected-value {
  			height: 52px;
  			line-height: 52px;
  		}
  	}
  	.ivu-select-item {
  		height: 40px;
  		line-height: 40px;
  		display: flex;
  		align-items: center;
  	}
  }

  .product-content {
    margin-top: 24px;

    .product-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }
  }

  .page {
    text-align: right;
  }
}
</style>